<template>
  <div class="bill-list" v-if="billList.length > 0">
    <div class="bill-item" v-for="item in billList" :key="item.id">
      <image class="bill-item-avatar" mode="aspectFill" :src="item.avatar"></image>
      <div class="bill-item-title">{{ item.title }}</div>
      <div class="bill-item-time">{{ item.time }}</div>
      <div class="bill-item-amount decrease">{{ '-' + item.amount.toFixed(2) }}</div>
    </div>
  </div>

  <!-- 暂无明细提示 -->
  <div class="bill-empty" v-else>当前账户暂无明细记录～</div>
</template>

<script setup lang="ts">

type Props = {
  billList: BillListItem[],
}

const props = defineProps<Props>()

</script>

<style scoped lang="scss">
.bill-list {
  display: flex;
  flex-direction: column;

  .bill-item {
    height: 16.1538vw;

    padding: 10px 15px;

    display: grid;
    grid-template:
      'bill-item-avatar bill-item-title bill-item-amount' 1fr
      'bill-item-avatar bill-item-time bill-item-amount' 1fr
      / 9.2308vw auto 1fr;
    column-gap: 10px;
    align-items: center;

    .bill-item-avatar {
      grid-area: bill-item-avatar;
      width: 9.2308vw;
      height: 9.2308vw;
      border-radius: 50%;
      margin-right: 10px;
    }

    .bill-item-title {
      grid-area: bill-item-title;
      font-size: 13px;
      color: #333333;
    }

    .bill-item-time {
      grid-area: bill-item-time;
      font-size: 13px;
      color: #91949f;
    }

    .bill-item-amount {
      grid-area: bill-item-amount;
      justify-self: flex-end;

      font-size: 17px;
      color: #27ae60;

      // 减少的样式
      &.decrease {
        color: #EB5757;
      }
    }
  }
}

// 暂无明细提示
.bill-empty {
  /* height: calc(100% - 385rpx); */

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 20px;
  margin-top: 288rpx;
  color: rgba(0, 0, 0, .6);
}
</style>
